<template>
  <div class="middle-search">
      <div class="middle-search-content">
        <div class="title">VIN查询</div>
        <input v-model="condition" type="text" placeholder="请输入VIN车架号" class="vim-input">
        <button type="button" class="query-btn"@click="search()">查询</button>

        <div class="title m_t" v-if="history.length > 0">历史查询</div>
        <ul class="history_list" v-if="history.length > 0">
          <li v-for="item in history" @click="searchByHistory(item)">{{item}}</li>
        </ul>
      </div>

      <el-dialog
        :visible.sync="dialogVisible"
        size="tiny">
        <span>请输入正确的车架号</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  import * as VinCheck from './../../../utils/VinCheck.js'
  export default {
    data () {
      return {
        dispatch: this.$store.dispatch, // 用于vuex值得动态设置
        getter: this.$store.getters,
        condition: '',
        dialogVisible: false,
        history: []
      }
    },
    methods: {
      search () {
        var _self = this
        if (!VinCheck.VinCheck(_self.condition)) {
          _self.dialogVisible = true
          return
        }
        _self.$emit('get-condition', _self.condition)
      },
      searchByHistory (item) {
        var _self = this
        _self.condition = item
        _self.$emit('get-condition', _self.condition)
      }
    },
    mounted() {
      var _self = this
      var localVim = _self.getter.VimNum
      if (localVim) {
        _self.condition = localVim
      }
      if (_self.$localStrorage.getStore('vimHistory')) {
        _self.history = _self.$localStrorage.getStore('vimHistory').reverse()
      }
      // console.log(_self.history)
    }
  }
</script>

<style lang="less">
  @import './middleSearch.less';
</style>
